<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <title>登入</title>
    <meta charset="utf-8" name="keywords" content="{{.system.keywords}}" />
    <meta charset="utf-8" name="description" content="{{.system.description}}" />
    <link rel ="shortcut Icon" href="{{.system.pathname}}">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/index.min.css" />
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/font/iconfont.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/xcConfirm.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/toast.css" />
    <style type="text/css">
    .login main { width: 100%; height: 500px; background-color: #E31939; font-family: 'microsoft yahei'; background-image: url(/static/pc/img/pc/login-banner.jpg); background-position: 40% center; background-size: auto 80%; background-repeat: no-repeat; position: relative; }
    .login .logo {height: 100px;}
    .login main div.loginBox form {overflow:hidden;}
    .login main div.loginBox form span{height: 40px;width: 40px;display: block;float: left;background-size: 100%;background-repeat: no-repeat;background-position: center;margin: 10px 0; } 
    .login main div.loginBox form span:nth-of-type(1){ background-image: url(/static/pc/img/pc/username.png) }
    .login main div.loginBox form span.password{ background-image: url(/static/pc/img/pc/password.png) }
    .login main div.loginBox form input {width: calc(100% - 40px);float: left;padding-left: 5px !important}
    #change{cursor: pointer;color: #999}
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
    input{outline: none;}
    .login main div.loginBox form input[type=number]{width: calc(100% - 100px) !important}
    #getcode{width: 100px;line-height: 40px;text-align: center;background: #aaa;color: #fff;cursor: pointer;}
    #code{display: none;}
    </style>
  </head>
  
  <body class="login">
    <header>
      <div>
        <img class="logo" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/logo.gif" alt="统采商城">
      </div>
    </header>
    <main>
      <div class="loginBox">
        <p class="hd">账号登录<a href="/sign">立即注册</a></p>
        <form>
          <span></span><input type="text" name="mobile" placeholder="手机号码">
          <div id="pwd">
            <span class="password"></span><input type="password" name="password" placeholder="密码">
          </div>
          <div id=code>
           <input type="number" name="code" placeholder="验证码" maxlength=6><span id="getcode">获取验证码</span>
          </div>
        </form>
        <p class="other"><a id="change" data-type="0">短信验证码登入</a></p>
        <button id="login">登录</button>
        <dl>
          <dt>第三方登录</dt>
          <dd><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/icon-wechat-a.png" id="wxlogin"></dd>
          <!-- <dd><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/icon-qq-a.png"></dd> -->
          <!-- <dd><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/alipay.png" alt=""></dd> -->
        </dl>
      </div>
    </main>
    {{template "pc/public/foot.html" .}}
  </body>
  <script src="https://api.map.baidu.com/api?v=3.0&ak=pZNN8yCbWXBezCgGpnKMQi283dFLAVGO&s=1" type="text/javascript"></script>
  <script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.min.js"></script>
  <script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/xcConfirm.js"></script>
  <script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/toast.js"></script>
  <script type="text/javascript">
    var city = ''
    {{if .currentcity}}
    {{else}}
    var geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function(r){  
        if(this.getStatus() == BMAP_STATUS_SUCCESS){  
            var pt = new BMap.Point(r.point.lng,r.point.lat)  
            var geoc = new BMap.Geocoder()
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents
                city = addComp.city
                console.log(city)
            });      
        }  
        else {  
          var myCity = new BMap.LocalCity()
          myCity.get(Ipmap)        
        }          
    },{enableHighAccuracy: true})
    function Ipmap(res) {
      city = res.name
      console.log(city)
    }
    {{end}}

    $('#change').click(function(){
      var type=$(this).attr('data-type')
      $(this).attr('data-type',Math.abs(type-1))
      if(type==0){
        $(this).text('密码直接登入')
        $('#pwd').hide()
        $('#code').show()
      }else{
        $(this).text('短信验证码登入')
        $('#pwd').show()
        $('#code').hide()
      }
    })
    $('#wxlogin').click(function(){
      window.location.href="/login_wechat?city="+city
    })
    var yzm = 0;
    function timeout(){
    var time = 60;
    var tt = setInterval(function(){
      if (time == '0') {
        $('#getcode').text('重新获取验证码')
        clearInterval(tt)
        yzm = 0
      }else {
        time--
        $('#getcode').text(time+'秒后重新获取')
      }
    },1000)
  }
  $('#getcode').click(function(){
    var mobile=$("input[name=mobile]").val()
    if ( mobile== "") {
      mui.toast("请输入手机号码~")
    }else if (!/^1[3456789]\d{9}$/.test(mobile)) {
      mui.toast("请输入正确的号码~")
    } else {
      if (yzm == 0) {
        var that=this
        that.disabled=true
        $.ajax({
          url:'/mobile/login/smssend',
          data:{mobile:mobile,type:0},
          success:function(res){
            if(res==1){
              // mui.toast("验证码获取成功~")
              $('#getcode').text('60秒后重新获取')    
              timeout()
              yzm = 1
            }else if(res==0){
              showToast("服务繁忙,请稍后再试~")
            }else if(res==2){
              showToast("该号码未注册,请先注册~")
            }else{
              showToast("服务繁忙,请稍后再试~")
            }
            that.disabled=false
          },
          error:function(){
            showToast("服务繁忙,请稍后再试~")
            that.disabled=false
          }
        })
      }else {
        showToast("请稍后再在获取~")
      }
    }
  })
  $('#login').click(function(){
    var type=$('#change').attr('data-type')
    var mobile=$("input[name=mobile]").val()
    if(!/^1[3456789]\d{9}$/.test(mobile)){
      showToast("请输入正确的号码~");
      return false;
    }
    if (type==1){
      if($("input[name=code]").val().length!=6){
        showToast("请输入验证码~");
        return false;
      }
    }else{
      if($("input[name=password]").val()==""){
        showToast("请输入密码~");
        return false;
      }
    }
    var that=this
    that.disabled=true
    var form=$('form').serialize()
    form+=`&style=`+type+'&city='+city
    $.ajax({
      url:window.location.href,
      data:form,
      type:'post',
      success:function(res){
        if(res==1){
          if(document.referrer){
            if(document.referrer=="http://test.tongcaigou.com/login"){
              window.location.href="/my"
            }else{
              window.location.href=document.referrer
            }
          }else{
            window.location.href="/my"
          }
        }else if(res==2){
          showToast("验证码错误!");
        }else if(res==3){
          showToast("该号码未注册!");
        }else if(res==0){
          showToast("密码错误!");
        }else{
          showToast("服务繁忙,请稍后再试~")
        }
        that.disabled=false
      },error:function(){
        showToast("服务繁忙,请稍后再试~")
        that.disabled=false
      }
    })
  })
  </script>
</html>